<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Tornado Chat Demo</title>
    <link rel="stylesheet" href="{{ static_url("chat.css") }}" type="text/css"/>
  </head>
  <body>
    <div id="nav">
      <b>{{ current_user }}</b> -
      <a href="/auth/logout">{{ _("Sign out") }}</a>
    </div>
    <div id="chatbox">
      <div id="inbox">
        {% for message in messages %}
          {% module Template("message.html", message=message) %}
        {% end %}
      </div>
      <div id="input">
        <form action="/a/message/new" method="post" id="messageform">
          <table>
            <tr>
              <td><input name="body" id="message" style="width:500px"/></td>
              <td style="padding-left:5px">
                <input type="submit" value="{{ _("Post") }}"/>
                <input type="submit" id="newterm" value="Create Terminal" onclick="GateOne.Terminal.newTerminal(); GateOne.Utils.removeElement('#newterm');" />
                <input type="hidden" name="next" value="{{ request.path }}"/>
                {% module xsrf_form_html() %}
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <script src="{{ static_url("jquery.min.js") }}" type="text/javascript"></script>
    <script src="{{ static_url("chat.js") }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ static_url("gateone.js") }}"></script>
    <div id="gateone_container" style="position: absolute; bottom: 0; width: 100%; height: 20em;">
        <div id="gateone"></div>
    </div>
    <script>
    window.onload = function() {
        var authObj = {% raw auth %};
        // Init Gate One (client) using a specific Gate One server (url):
        GateOne.init({
            url: 'https://' + window.location.hostname + '/',
            fillContainer: true,
            auth: authObj,
            showToolbar: false, // Hide the toolbar but still show the title
            theme: 'black',
            embedded: true
        });
        // Using 'fillContainer: true' to make it easy to size the #gateone element (it will fill whatever you put it in)
    }
    </script>
  </body>
</html>
